htmlbook.ru Для тех, кто делает сайты
Впервые на русском языке появилась книга, которая полностью посвящена актуальной, но мало раскрытой теме — как сделать веб-страницы, чтобы их содержимое отображалось на экране быстро для читателя. Приемы верстки с помощью слоев, таблиц, фреймов, работа с графикой и скриптами — все это вы найдете в книге «Ускорение работы сайта».

Автор Влад Мержевич, 2005 г, 384 с. Издательство BHV-Санкт-Петербург

Свойства CSS

background
Сокращенный атрибут, который позволяет устанавливать пять отдельных параметров для изменения стиля фона.
background-attachment
Устанавливает, будет ли фоновый рисунок прокручиваться вместе с содержимым веб-страницы.
background-color
Цвет фона элемента.
background-image
Задает фоновый рисунок элемента.
background-position
Позиция левого верхнего угла фонового рисунка относительно родителя, например, окна веб-страницы.
background-repeat
Повторяемость фонового рисунка по горизонтальной и вертикальной оси.
border
Одновременно устанавливает толщину, цвет и стиль рамки вокруг элемента.
border-bottom
Устанавливает толщину, цвет и стиль нижней границы элемента.
border-bottom-color
Устанавливает цвет нижней границы элемента.
border-bottom-style
Устанавливает стиль линии нижней границы элемента.
border-bottom-width
Задает толщину нижней границы элемента.
border-collapse
Устанавливает, как отображать границы вокруг ячеек таблицы. Этот параметр играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины. Значение collapse заставляет браузер убирать в таблице двойные линии.
border-color
Задает цвет всех границ элемента.
border-left
Устанавливает толщину, цвет и стиль левой границы элемента.
border-left-color
Устанавливает цвет левой границы элемента.
border-left-style
Устанавливает стиль линии левой границы элемента.
border-left-width
Задает толщину левой границы элемента.
border-right
Устанавливает толщину, цвет и стиль правой границы элемента.
border-right-color
Устанавливает цвет правой границы элемента.
border-right-style
Устанавливает стиль линии правой границы элемента.
border-right-width
Задает толщину правой границы элемента.
border-style
Устанавливает стиль рамки вокруг элемента. Браузер Netscape 4 понимает только одно значение, которое определяет стиль сразу для всех границ. Для остальных браузеров допустимо устанавливать индивидуальные стили для разных сторон элемента.
border-top
Устанавливает толщину, цвет и стиль верхней границы элемента.
border-top-color
Устанавливает цвет верхней границы элемента.
border-top-style
Устанавливает стиль линии верхней границы элемента.
border-top-width
Задает толщину верхней границы элемента.
border-width
Задает толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны. Способ изменения толщины зависит от числа аргументов.
bottom
Для позиционированного элемента определяет положение его нижнего края.
clear
Параметр устанавливает, с какой стороны элемента запрещено его обтекание другими элементами.
clip
Определяет видимую область позиционированного элемента.
color
Цвет переднего плана элемента.
cursor
Изменение вида курсора мыши, когда он находится на элементе.
display
Многоцелевой атрибут, который определяет должен ли элемент быть виден в документе.
float
Определяет, с какой стороны будет происходить обтекание элемента текстом или другими объектами.
font
Сокращенный атрибут, который позволяет одновременно установить несколько параметров шрифта.
font-family
Определяет семейство шрифтов.
font-size
Размер шрифта элемента.
font-style
Определяет, предоставлен ли элемент в нормальном, курсивном или наклонном начертании.
font-variant
Используется для написания капителью &8212; заглавными символами уменьшенного размера.
font-weight
Задает жирность шрифта.
height
Задает высоту блочных или заменяемых элементов (к ним, например, относится тег IMG). Высота не включает толщину границ вокруг элемента, значение отступов и полей.
left
Для позиционированного элемента определяет положение его левого края.
letter-spacing
Определяет интервал между буквами внутри элемента.
line-height
Интерлиньяж (расстояние между линиями строк).
list-style
Сокращенный атрибут, который устанавливает вид списка и его положение.
list-style-image
Указывает изображение, которое будет использоваться в качестве маркеров.
list-style-position
Определяет, является ли маркер внутри или снаружи текстового блока, содержащего список.
list-style-type
Вид маркеров списка.
margin
Сокращенный атрибут, который устанавливает отступы от края браузера до границ элемента.
margin-bottom
Определяет отступ от нижнего края родительского элемента.
margin-left
Определяет отступ от левого края родительского элемента.
margin-right
Определяет отступ от правого края родительского элемента.
margin-top
Определяет отступ от верхнего края родительского элемента.
overflow
Управляет обработкой содержания, которое выходит за пределы физического размера элемента, например, путем добавления полос прокрутки.
padding
Сокращенный атрибут, который устанавливает поля от содержимого элемента до его границ.
padding-bottom
Устанавливает поля от содержимого элемента до его нижней границы.
padding-left
Устанавливает поля от содержимого элемента до его левой границы.
padding-right
Устанавливает поля от содержимого элемента до его правой границы.
padding-top
Устанавливает поля от содержимого элемента до его верхней границы.
position
Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.
right
Для позиционированного элемента определяет положение его правого края.
table-layout
Определяет, как браузер должен вычислять высоту и ширину ячеек таблицы, основываясь на ее содержимом.
text-align
Выравнивание текста по левому, правому краю или по ширине контейнера.
text-decoration
Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания.
text-indent
Отступ первой строки текстового блока.
text-transform
Управляет преобразованием текста элемента в заглавные или прописные символы.
top
Для позиционированного элемента определяет положение его верхнего края.
vertical-align
Выравнивает элемент по вертикали относительно своего родителя.
visibility
Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним.
white-space
Устанавливает, как отображать пробелы между словами. Обычно любое число пробелов в коде HTML показывается на веб-странице как один. Использование white-space изменяет это свойство и текст выводится со всеми пробелами, как он был введен пользователем.
width
Устанавливает ширину блочных или заменяемых элементов (к ним, например, относится тег IMG). Ширина не включает толщину границ вокруг элемента, значение отступов и полей.
word-spacing
Устанавливает интервал между словами в тексте.
z-index
Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. z-index управляет порядком наложения элементов по z-оси.

Справочник по CSS. Версия 1.0

Copyright © 2002 — 2005 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru


background

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Да | Да | Да | Да | Да | Да | Ошибки | Да | Да | Да | Да | Да

Описание
Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту. Некоторые параметры не поддерживаются браузером Netscape 4.x. Для более подробного ознакомления с аргументами, смотрите свойства каждого параметра отдельно.

Синтаксис
background: background-attachment || background-color || background-image || background-position || background-repeat

Аргументы
Любые комбинации пяти значений, определяющих стиль фона, в произвольном порядке. Значения разделяются между собой пробелом. Ни один аргумент не является обязательным, поэтому неиспользуемые значения можно опустить.

Значение по умолчанию
Нет.

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
BODY { background: url(bg.gif ) repeat fixed }
P { background: #C0C0C0 }

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.background

Примечание
Netscape 4.x работает некорректно с отображением фона. Если вокруг элемента нет никакой границы, то фон будет только под текстом, а не у всей области. Даже если граница добавлена, между ней и областью будет небольшой промежуток, избавиться от которого нет возможности.


background-attachment

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Да | Да | Да | Да | Да | Да | Нет | Да | Да | Да | Да | Да

Описание
Параметр background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.

Синтаксис
background-attachment: fixed | scroll

Аргументы
Значение fixed делает фоновое изображение элемента неподвижным, scroll — позволяет перемещаться фону вместе с содержимым.

Значение по умолчанию
scroll

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
BODY { background-image: url(images/bg.gif);background-attachment: fixed }

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.backgroundAttachment


background-color

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Да | Да | Да | Да | Да | Да | Ошибки | Да | Да | Да | Да | Да

Описание
Устанавливает фоновый цвет элемента. Хотя этот параметр не наследует свойства своего родителя, из-за того, что начальное значение цвета фона устанавливается прозрачным, он совпадает с фоном текущего элемента.

Синтаксис
background-color: цвет

Аргументы
Значение цвета может задаваться по его названию, шестнадцатеричному значению, либо с помощью RGB. Кроме значения цвета, еще один допустимый аргумент — transparent, устанавливающий прозрачный фон.

Значение по умолчанию
transparent

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
BODY { background-color: #3366CC }
P { background-color: yellow }
P { background-color: #98560F }
P { background-color: RGB(249, 231, 16) }

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.backgroundColor

Примечание
Браузер Netscape 4.x не применяет цвет фона к блоку текста и отступам вокруг него, а только к тексту в элементе. Чтобы избавиться от этого недостатка, можно сделать вокруг области границу нулевой толщины.


background-image

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Описание
Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображение не доступно или отключен их показ в браузере. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет.

Синтаксис
background-image: url(путь к файлу) | none

Аргументы
В качестве значения используется путь к графическому файлу, который указывается внутри конструкции url(). Либо аргумент может принимать значение none, когда фоновое изображение не требуется.

Значение по умолчанию
none

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
BODY { background-image: url(images/bg.gif) }

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.backgroundImage


background-position

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Да | Да | Да | Да | Да | Да | Нет | Да | Да | Да | Да | Да

Описание
Задает положение левого верхнего угла фонового изображения, установленного с помощью параметра background-image.

Синтаксис
background-position: [проценты | значение] | [left | center | right] || [top | center | bottom]

Аргументы
У этого параметра два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Положение можно, также, задавать в процентах, пикселях или других единицах.

Значение по умолчанию
0%

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
BODY { background-image: url(mybg.gif); background-position: right bottom }

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.backgroundPosition


background-repeat

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Ошибки | Да | Да | Да | Ошибки | Да | Нет | Да | Да | Да | Да | Да

Описание
Определяет, как будет повторяться фоновое изображение, установленное с помощью параметра background-image, и по какой оси. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.

Синтаксис
background-repeat: no-repeat | repeat | repeat-x | repeat-y

Аргументы
Значение no-repeat устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется атрибутом background-position (по умолчанию в левом верхнем углу). Другими допустимыми значениями являются repeat (повторяемость по вертикали и горизонтали), repeat-x (по горизонтали), repeat-y (по вертикали).

Значение по умолчанию
repeat

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
BODY { background-image: url(mybg.gif); background-repeat: repeat-y }

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.backgroundRepeat

Примечание
Internet Explorer 4 повторяет фоновый рисунок вниз и направо. Более правильное поведение для изображения фона — повторяться в обоих направлениях по горизонтали (для параметра repeat-x) или вертикали (параметр repeat-y).


border

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Част. | Част. | Да | Да | Част. | Да | Нет | Да | Да | Да | Да | Да

Част. — Поддерживается частично

Описание
Параметр позволяет одновременно установить толщину, стиль и цвет рамки вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту. Для установки рамки только на определенных сторонах элемента, воспользуйтесь параметрами border-top, border-bottom, border-left, border-right.

Синтаксис
border: border-width || border-style || color

Аргументы
Значение border-width определяет толщину рамки. Для управления видом рамки предоставляется восемь значений параметра border-style. Их названия и результат действия представлен на рис. 1.

Стили рамок
Рис.1. Стили рамок

Первые два стиля — dotted и dashed поддерживаются браузером Netscape, начиная с шестой версии, а браузером Internet Explorer с версии 5.5.
Аргумент color устанавливает цвет рамки, значение может быть в любом допустимом для CSS формате.

Значение по умолчанию
Нет.

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>

<div style="border: 2px solid black; background: #fc3; padding: 10px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.border

Примечание
Internet Explorer 4/5 не применяет рамку к встроенным элементам.


border-bottom

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Част. | Част. | Да | Да | Част. | Да | Нет | Да | Да | Да | Да | Да

Част. — Поддерживается частично

Описание
Параметр позволяет одновременно установить толщину, стиль и цвет границы внизу элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.

Синтаксис
border-bottom: border-width || border-style || color

Аргументы
Значение border-width определяет толщину рамки. Для управления видом рамки предоставляется восемь значений параметра border-style. Их названия и результат действия представлен на рис. 1.

Стили рамок
Рис.1. Стили рамок

Первые два стиля — dotted и dashed поддерживаются браузером Netscape, начиная с шестой версии, а браузером Internet Explorer с версии 5.5.
Аргумент color устанавливает цвет рамки, значение может быть в любом допустимом для CSS формате.

Значение по умолчанию
Нет.

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>

<div style="border-bottom: 2px solid black; background: #fc3; padding: 10px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.borderBottom

Примечание
Internet Explorer 4/5 не применяет рамку к встроенным элементам.


border-bottom-color

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Част. | Част. | Да | Да | Част. | Да | Нет | Да | Да | Да | Да | Да

Част. — Поддерживается частично

Описание
Устанавливает цвет границы внизу элемента.

Синтаксис
border-bottom-color: цвет

Аргументы
Значение цвета может задаваться по его названию, шестнадцатеричному значению, либо с помощью RGB. Кроме значения цвета, еще один допустимый аргумент — transparent, устанавливающий прозрачный фон.

Значение по умолчанию
Нет.

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
P { border-bottom-color: red }
P { border-bottom-color: # 4B3A6E }

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.borderBottomColor

Примечание
Internet Explorer 4/5 правильно работает для блочных элементов, но встроенные элементы игнорирует полностью.


border-bottom-style

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Част. | Част. | Да | Да | Част. | Да | Част. | Да | Да | Да | Да | Да

Част. — Поддерживается частично

Описание
Устанавливает стиль границы внизу элемента.

Синтаксис
border-bottom-style: стиль

Аргументы
Для управления видом рамки предоставляется восемь значений параметра border-style. Их названия и результат действия представлен на рис. 1.

Стили рамок
Рис.1. Стили рамок

Первые два стиля — dotted и dashed поддерживаются браузером Netscape, начиная с шестой версии, а браузером Internet Explorer с версии 5.5.

Значение по умолчанию
Нет.

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
P { border-bottom-style: double }

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.borderBottomStyle

Примечание
Internet Explorer 4/5 правильно работает для блочных элементов, но встроенные элементы игнорирует полностью.


border-bottom-width

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Част. | Част. | Да | Да | Част. | Да | Ошибки | Да | Да | Да | Да | Да

Част. — Поддерживается частично

Описание
Устанавливает толщину границы внизу элемента.

Синтаксис
border-bottom-width: thin | medium | thick | значение

Аргументы
Три переменные — thin, medium и thick задают толщину границы внизу. Для более точного значения, толщину можно указывать в пикселях или других единицах.

Значение по умолчанию
medium (IE); 0 (NN).

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
H1 { border-bottom-width: 2px }

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.borderBottomWidth

Примечание
Если стиль границы не установлен с помощью параметра border-style, Netscape 4.x все равно создает видимые границы. При установке стиля границы, они отрисовываются не на всех сторонах. Internet Explorer 4/5 правильно работает для блочных элементов, но встроенные элементы игнорирует полностью.


border-color

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Част. | Част. | Да | Да | Част. | Да | Част. | Да | Да | Част. | Да | Да

Част. — Поддерживается частично.

Описание
Устанавливает цвет границы на разных сторонах элемента. Параметр позволяет задать цвет границы сразу на всех сторонах элемента или определить цвет границы только на указанных сторонах.

Синтаксис
border-color: color {1,4}

Аргументы
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества аргументов и приведен в сводной таблице.

Число аргументов | Результат
1 | Цвет рамки будет установлен для всех сторон элемента.
2 | Первый аргумент устанавливает цвет верхней и нижней границы, второй аргумент — левой и правой.
3 | Первый аргумент задает цвет верхней границы, второй — одновременно левой и правой стороны, а третий — нижней границы.
4 | Поочередно устанавливается цвет верхней, правой, нижней и левой границы.

Значение по умолчанию
Значение цвета, заданное параметром color.

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
P { border-color: red rgb(0,0,255) red }
DIV { border-color: #008A77 }

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID")style.borderColor

Примечание
Netscape 4.x и Opera 3.6 не могут устанавливать разные цвета границ для индивидуальных сторон элемента, как, например border-color: red green blue orange.
Internet Explorer 4/5 не может применять цвета границ к встроенным элементам.


border-left

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Част. | Част. | Да | Да | Част. | Да | Нет | Да | Да | Да | Да | Да

Част. — Поддерживается частично

Описание
Параметр позволяет одновременно установить толщину, стиль и цвет левой границы элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.

Синтаксис
border-left: border-width || border-style || color

Аргументы
Значение border-width определяет толщину рамки. Для управления видом рамки предоставляется восемь значений параметра border-style. Их названия и результат действия представлен на рис. 1.

Стили рамок
Рис.1. Стили рамок

Первые два стиля — dotted и dashed поддерживаются браузером Netscape, начиная с шестой версии, а браузером Internet Explorer с версии 5.5.
Аргумент color устанавливает цвет рамки, значение может быть в любом допустимом для CSS формате.

Значение по умолчанию
Нет.

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>

<div style="border-left: 1px solid black; padding-left: 10px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.borderLeft

Примечание
Internet Explorer 4/5 не применяет рамку к встроенным элементам.


border-left-color

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Част. | Част. | Да | Да | Част. | Да | Нет | Да | Да | Да | Да | Да

Част. — Поддерживается частично

Описание
Параметр позволяет одновременно установить толщину, стиль и цвет левой границы элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.

Синтаксис
border-left: border-width || border-style || color

Аргументы
Значение border-width определяет толщину рамки. Для управления видом рамки предоставляется восемь значений параметра border-style. Их названия и результат действия представлен на рис. 1.

Стили рамок
Рис.1. Стили рамок

Первые два стиля — dotted и dashed поддерживаются браузером Netscape, начиная с шестой версии, а браузером Internet Explorer с версии 5.5.
Аргумент color устанавливает цвет рамки, значение может быть в любом допустимом для CSS формате.

Значение по умолчанию
Нет.

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
P { border-left: 1px solid #bd0ef6 }

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.borderLeft

Примечание
Internet Explorer 4/5 не применяет рамку к встроенным элементам.


border-left-style

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Част. | Част. | Да | Да | Част. | Да | Част. | Да | Да | Да | Да | Да

Част. — Поддерживается частично

Описание
Устанавливает стиль границы левой стороны элемента.

Синтаксис
border-left-style: стиль

Аргументы
Для управления видом рамки предоставляется восемь значений параметра border-style. Их названия и результат действия представлен на рис. 1.

Стили рамок
Рис.1. Стили рамок

Первые два стиля — dotted и dashed поддерживаются браузером Netscape, начиная с шестой версии, а браузером Internet Explorer с версии 5.5.

Значение по умолчанию
Нет.

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
P { border-left-style: groove }

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.borderLeftStyle

Примечание
Internet Explorer 4/5 правильно работает для блочных элементов, но встроенные элементы игнорирует полностью.


border-left-width

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Част. | Част. | Да | Да | Част. | Да | Ошибки | Да | Да | Да | Да | Да

Част. — Поддерживается частично

Описание
Устанавливает толщину границы левой стороны элемента.

Синтаксис
border-left-width: thin | medium | thick | значение

Аргументы
Три переменные — thin, medium и thick задают толщину границы. Для более точного значения, толщину можно указывать в пикселях или других единицах.

Значение по умолчанию
medium (IE); 0 (NN).

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
H1 { border-left-width: 2px }

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.borderLeftWidth

Примечание
Если стиль границы не установлен с помощью параметра border-style, Netscape 4.x все равно создает видимые границы. При установке стиля границы, они отрисовываются не на всех сторонах. Internet Explorer 4/5 правильно работает для блочных элементов, но встроенные элементы игнорирует полностью.


border-right

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Част. | Част. | Да | Да | Част. | Да | Нет | Да | Да | Да | Да | Да

Част. — Поддерживается частично

Описание
Параметр позволяет одновременно установить толщину, стиль и цвет границы с правой стороны элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.

Синтаксис
border-right: border-width || border-style || color

Аргументы
Значение border-width определяет толщину рамки. Для управления видом рамки предоставляется восемь значений параметра border-style. Их названия и результат действия представлен на рис. 1.

Стили рамок
Рис.1. Стили рамок

Первые два стиля — dotted и dashed поддерживаются браузером Netscape, начиная с шестой версии, а браузером Internet Explorer с версии 5.5.
Аргумент color устанавливает цвет рамки, значение может быть в любом допустимом для CSS формате.

Значение по умолчанию
Нет.

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>

<div style="border-right: 1px solid black; padding-left: 10px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

<body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.borderRight

Примечание
Internet Explorer 4/5 не применяет рамку к встроенным элементам.


border-right-color

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Част. | Част. | Да | Да | Част. | Да | Нет | Да | Да | Да | Да | Да

Част. — Поддерживается частично

Описание
Устанавливает цвет границы правой стороны элемента.

Синтаксис
border-right-color: цвет

Аргументы
Значение цвета может задаваться по его названию, шестнадцатеричному значению, либо с помощью RGB. Кроме значения цвета, еще один допустимый аргумент — transparent, устанавливающий прозрачный фон.

Значение по умолчанию
Нет.

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
P { border-right-color: red }
P { border-right-color: # 4B3A6E }

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.borderRightColor

Примечание
Internet Explorer 4/5 правильно работает для блочных элементов, но встроенные элементы игнорирует полностью.


border-right-style

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Част. | Част. | Да | Да | Част. | Да | Част. | Да | Да | Да | Да | Да

Част. — Поддерживается частично

Описание
Устанавливает стиль границы правой стороны элемента.

Синтаксис
border-right-style: стиль

Аргументы
Для управления видом рамки предоставляется восемь значений параметра border-style. Их названия и результат действия представлен на рис. 1.

Стили рамок
Рис.1. Стили рамок

Первые два стиля — dotted и dashed поддерживаются браузером Netscape, начиная с шестой версии, а браузером Internet Explorer с версии 5.5.

Значение по умолчанию
Нет.

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
P { border-right-style: solid }

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.borderRightStyle

Примечание
Internet Explorer 4/5 правильно работает для блочных элементов, но встроенные элементы игнорирует полностью.


border-right-width

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Част. | Част. | Да | Да | Част. | Да | Ошибки | Да | Да | Да | Да | Да

Част. — Поддерживается частично

Описание
Устанавливает толщину границы правой стороны элемента.

Синтаксис
border-right-width: thin | medium | thick | значение

Аргументы
Три переменные — thin, medium и thick задают толщину границы. Для более точного значения, толщину можно указывать в пикселях или других единицах.

Значение по умолчанию
medium (IE); 0 (NN).

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
H1 { border-right-width: 2px }

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.borderRightWidth

Примечание
Если стиль границы не установлен с помощью параметра border-style, Netscape 4.x все равно создает видимые границы. При установке стиля границы, они отрисовываются не на всех сторонах. Internet Explorer 4/5 правильно работает для блочных элементов, но встроенные элементы игнорирует полностью.


border-style

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Част. | Част. | Да | Да | Част. | Да | Част. | Да | Да | Да | Да | Да

Част. — Поддерживается частично

Описание
Устанавливает стиль рамки вокруг элемента. Браузер Netscape 4 понимает только одно значение, которое определяет стиль сразу для всех границ. Для остальных браузеров допустимо устанавливать индивидуальные стили для разных сторон элемента.

Синтаксис
border-style: стиль

Аргументы
Для управления видом рамки предоставляется восемь значений параметра border-style. Их названия, вид и поддержка разными браузерами приведена в табл. 1.

Табл. 1. Тип стиля границы элемента
 | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
 | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
 | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
dotted | Нет | Нет | Да | Да | Нет | Да | Нет | Да | Да | Да | Да | Да
dashed | Нет | Нет | Да | Да | Нет | Да | Нет | Да | Да | Да | Да | Да
solid | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да
double | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да
groove | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да
ridge | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да
inset | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да
outset | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества аргументов и приведен в табл. 2.

Табл. 2. Зависимость результата использования атрибута от числа аргументов
Число аргументов | Результат
1 | Стиль рамки будет задан для всех сторон элемента.
2 | Первый аргумент устанавливает стиль верхней и нижней границы, второй аргумент — левой и правой.
3 | Первый аргумент задает стиль верхней границы, второй — одновременно левой и правой стороны, а третий — нижней границы.
4 | Поочередно устанавливается стиль верхней, правой, нижней и левой границы.

Значение по умолчанию
Нет.

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<head>
<style type="text/css">
P { border-style: double }
</style>
</head>
<body>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.borderStyle

Примечание
Internet Explorer 4/5 правильно работает для блочных элементов, но встроенные элементы игнорирует полностью.


border-top

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Част. | Част. | Да | Да | Част. | Да | Нет | Да | Да | Да | Да | Да

Част. — Поддерживается частично

Описание
Параметр позволяет одновременно установить толщину, стиль и цвет границы сверху элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.

Синтаксис
border-top: border-width || border-style || color

Аргументы
Значение border-width определяет толщину рамки. Для управления видом рамки предоставляется восемь значений параметра border-style. Их названия и результат действия представлен на рис. 1.

Стили рамок
Рис.1. Стили рамок

Первые два стиля — dotted и dashed поддерживаются браузером Netscape, начиная с шестой версии, а браузером Internet Explorer с версии 5.5.
Аргумент color устанавливает цвет рамки, значение может быть в любом допустимом для CSS формате.

Значение по умолчанию
Нет.

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>

<div style="border-top: 2px solid black; background: #fc3; padding: 10px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

<body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.borderTop

Примечание
Internet Explorer 4/5 не применяет рамку к встроенным элементам.


border-top-color

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Част. | Част. | Да | Да | Част. | Да | Нет | Да | Да | Да | Да | Да

Част. — Поддерживается частично

Описание
Устанавливает цвет границы сверху элемента.

Синтаксис
border-top-color: цвет

Аргументы
Значение цвета может задаваться по его названию, шестнадцатеричному значению, либо с помощью RGB. Кроме значения цвета, еще один допустимый аргумент — transparent, устанавливающий прозрачный фон.

Значение по умолчанию
Нет.

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
P { border-top-color: red }
P { border-top-color: # 4B3A6E }

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.borderTopColor

Примечание
Internet Explorer 4/5 правильно работает для блочных элементов, но встроенные элементы игнорирует полностью.


border-top-style

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Част. | Част. | Да | Да | Част. | Да | Част. | Да | Да | Да | Да | Да

Част. — Поддерживается частично

Описание
Устанавливает стиль границы верхней части элемента.

Синтаксис
border-top-style: стиль

Аргументы
Для управления видом рамки предоставляется восемь значений параметра border-style. Их названия и результат действия представлен на рис. 1.

Стили рамок
Рис.1. Стили рамок

Первые два стиля — dotted и dashed поддерживаются браузером Netscape, начиная с шестой версии, а браузером Internet Explorer с версии 5.5.

Значение по умолчанию
Нет.

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
P { border-top-style: dotted }

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.borderTopStyle

Примечание
Internet Explorer 4/5 правильно работает для блочных элементов, но встроенные элементы игнорирует полностью.


border-top-width

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Част. | Част. | Да | Да | Част. | Да | Ошибки | Да | Да | Да | Да | Да

Част. — Поддерживается частично

Описание
Устанавливает толщину границы верхней части элемента.

Синтаксис
border-top-width: thin | medium | thick | значение

Аргументы
Три переменные — thin, medium и thick задают толщину границы. Для более точного значения, толщину можно указывать в пикселях или других единицах.

Значение по умолчанию
medium (IE); 0 (NN).

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
H1 { border-top-width: 2px }

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.borderTopWidth

Примечание
Если стиль границы не установлен с помощью параметра border-style, Netscape 4.x все равно создает видимые границы. При установке стиля границы, они отрисовываются не на всех сторонах. Internet Explorer 4/5 правильно работает для блочных элементов, но встроенные элементы игнорирует полностью.


border-width

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Да | Да | Да | Да | Да | Да | Ошибки | Да | Да | Да | Да | Да

Описание
Задает толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны. Способ изменения толщины зависит от числа аргументов.

Синтаксис
border-width: thin | medium | thick | значение

Аргументы
Три переменные — thin (2 px), medium (4 px) и thick (6 px) задают толщину границы. Для более точного значения, толщину можно указывать в пикселах или других единицах. Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества аргументов и приведен в табл. 1.

Табл. 1. Зависимость результата использования атрибута от числа аргументов
Число аргументов | Результат
1 | Толщина рамки будет установлена для всех сторон элемента.
2 | Первый аргумент устанавливает толщину верхней и нижней границы, второй аргумент — левой и правой.
3 | Первый аргумент задает толщину верхней границы, второй — одновременно левой и правой стороны, а третий — нижней границы.
4 | Поочередно устанавливается толщину верхней, правой, нижней и левой границы.

Значение по умолчанию
Нет.

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<head>
<style type="text/css">
P { border-style: double; border-width: 3px 7px 7px 4px; padding: 7px }
</style>
<body>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.borderWidth

Примечание
Если стиль границы не установлен с помощью параметра border-style, Netscape 4.x все равно создает видимые границы. При установке стиля границы, они отрисовываются не на всех сторонах. Internet Explorer 4/5 правильно работает для блочных элементов, но встроенные элементы игнорирует полностью.


bottom

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Нет | Нет | Да | Да | Нет | Да | Нет | Да | Да | Нет | Да | Да

Описание
Устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов. Отсчет координат зависит от параметра position, он обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).
При относительном позиционировании элемента, отсчет ведется от нижнего края родительского элемента (рис. 1), а при абсолютном — относительно нижнего края окна документа (рис. 2).

Рис. 1. Значение параметра bottom при относительном позиционирование элемента

Рис. 2. Значение параметра bottom при абсолютном позиционирование элемента

Синтаксис
bottom: значение | проценты | auto

Аргументы
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. Значение параметра bottom может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента. Аргумент auto не изменяет положение элемента.

Значение по умолчанию
auto

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>

<div style="bottom: 100px; position: absolute; background: #f0f0f0; padding: 10px: border: solid 1px black">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</div>

</body>
</html>

Применяется
Ко всем элементам.


height

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Част. | Да | Да | Да | Част. | Да | Да | Да | Да | Част. | Да | Да

Част. — Поддерживается частично

Описание
Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег IMG). Высота не включает толщину границ вокруг элемента, значение отступов и полей.

Браузеры по-разному реагируют на настройки высоты элемента. Если его содержимое превышает указанную высоту, то Internet Explorer и Opera проигнорируют значение параметра height и автоматически подстроят высоту под контент. Браузер Netscape (а также Mozilla и FireFox) оставит высоту элемента неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, в случае, когда в коде HTML они идут последовательно. Чтобы этого не произошло, можно добавить свойство overflow: auto к стилю элемента.

Синтаксис
height: значение | проценты | auto

Аргументы
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи высота элемента вычисляется в зависимости от высоты родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера. Аргумент auto устанавливает высоту исходя из содержимого элемента

Значение по умолчанию
auto

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>

<div style="height: 50px; background: #fc0; padding: 7px; border: 1px solid #ccc">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>

</body>
</html>

Применяется
Ко всем элементам, за исключением встроенных незаменяемых элементов, колонкам и группам таблицы.

Объектная модель
[window.]document.getElementById("elementID").style.height

Примечание
Браузер Internet Explorer 4 не применяет свойство height к встроенным элементам, списками и некоторым элементам форм, вроде флажков, переключателей и текстовых полей.

В браузере Opera 3.5 этот параметр не дает никакого эффекта для встроенных элементов, полей формы и таблиц.


left

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Част. | Част. | Да | Да | Част. | Да | Ошибки | Да | Да | Нет | Да | Да

Част. — Поддерживается частично

Описание
Для позиционированного элемента определяет расстояние от левого края родительского элемента, не включая отступ, поле и ширину рамки, до левого края дочернего элемента (рис. 1). Отсчет координат зависит от значения параметра position. Если его аргумент равен absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его левого края. В случае значения relative, значение left отсчитывается от левого края родителя.

Рис. 1. Значение параметра left

Рис. 1. Значение параметра left

Синтаксис
left: значение | проценты | auto

Аргументы
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. Значение параметра left может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от ширины родительского элемента. Аргумент auto не изменяет положение элемента.

Значение по умолчанию
auto

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>

<div style="position: absolute; left: 20px; background: #fc3; margin: 7px">
<div style="position: relative; left: -10px; border: 1px solid black; padding: 10px; margin: 7px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<div>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.left


position

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Ошибки | Част. | Част. | Част. | Част. | Част. | Ошибки | Част. | Да | Нет | Да | Да

Част. — Поддерживается частично.

Описание
Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

Синтаксис
position: absolute | fixed | relative | static

Аргументы
Допустимые аргументы параметра position, их описания и поддержка браузерами приведена в таблице 1.

Таблица 1. Значения свойства position
Значение | Описание | Браузеры
absolute | Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера. | IE4 NС4 O4
fixed | По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы. Браузеры Netscape, Mozilla и Firefox вообще не отображают полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. | NС6.1 O4
relative | Положение элемента устанавливается относительно родителя, иными словами, контейнера, в который вложен элемент. Если родительский элемент явно не задан, то в качестве него выступает окно браузера. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от родителя, в зависимости от применяемого параметра. | IE4 NС4 O4
static | Элементы отображаются как обычно. Использование параметров left, top, right и bottom не приводит ни к каким результатам. | IE4 NC4 O4

Обозначения, используемые в таблице: IE — Internet Explorer; NC — Netscape; O — Opera. Число после имени браузера указывает, начиная с какой версии, поддерживается значение.

Значение по умолчанию
static

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>

<div style="font-family: Times, serif; font-size: 200%">
T<span style="position: relative; top: 10px">E</span>X и L<span style="position: relative; top: -5px; font-size: 80%">A</span>T<span style="position: relative; top: 10px">E</span>X
</div>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.position

Примечание
В браузере Internet Explorer 4 добавление параметра position: absolute к ссылкам не позиционирует их, вдобавок ссылки теряют свою функциональность. Кроме того, в этом браузере абсолютное позиционирование не работает для встроенных элементов и списков, а относительное позиционирование не применяется к ячейкам таблицы (теги TD и TH).

Браузер Netscape 4.x не применяет значение relative к полям формы, спискам, изображениям, таблицам или их ячейкам, абсолютное позиционирование не действует для списков или элементов форм.


right

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Нет | Нет | Да | Да | Нет | Да | Нет | Да | Да | Нет | Да | Да

Описание
Для позиционированного элемента определяет расстояние от правого края родительского элемента, не включая отступ, поле и ширину рамки, до правого края дочернего элемента (рис. 1). Отсчет координат зависит от значения параметра position. Если его аргумент равен absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его правого края. В случае значения relative, значение right отсчитывается от правого края родителя.

Рис. 1. Значение параметра right

Рис. 1. Значение параметра right

Синтаксис
right: значение | проценты | auto

Аргументы
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. Значение параметра right может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от ширины родительского элемента. Аргумент auto не изменяет положение элемента.

Значение по умолчанию
auto

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<head>
<style>
#left { position: absolute; top: 20px; left: 20px; width:100px; background: #fc3; border: 1px solid black; padding: 10px }
#center { position: relative; width: auto; padding: 10px; margin: 30px 210px 0px 110px; }
#right { position: absolute; top: 20px; right: 20px; width:200px; background: #fc3; border: 1px solid black; padding: 10px }
</style>
</head>
</body>

<div id=left>...</div>
<div id=center>...</div>
<div id=right>...</div>

<body>
</html>

Применяется
Ко всем элементам.


top

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Част. | Част. | Да | Да | Част. | Да | Ошибки | Да | Да | Нет | Да | Да

Част. — Поддерживается частично

Описание
Для позиционированного элемента определяет расстояние от верхнего края родительского элемента, не включая отступ, поле и ширину рамки, до верхнего края дочернего элемента (рис. 1). Отсчет координат зависит от значения параметра position. Если его аргумент равен absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его левого края. В случае значения relative, значение left отсчитывается от левого края родителя.

Рис. 1. Значение параметра top

Рис. 1. Значение параметра top

Синтаксис
top: значение | проценты | auto

Аргументы
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. Значение параметра top может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента. Аргумент auto не изменяет положение элемента.

Значение по умолчанию
auto

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<head>
<style>
#menu { position: absolute; left: 350px; top: 50px; width: 120px; background: #e0e0e0; border: solid 1px black; text-align: left; }
#content { position: absolute; left: 0px; top: 0px; width: 400px; background: #800000; color: white; text-align: left; }
</style>

<body>

<div id=content>...</div>
<div id=menu>...</div>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.top


width

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Част. | Да | Да | Да | Част. | Да | Част. | Да | Да | Част. | Да | Да

Част. — поддерживается частично

Описание
Устанавливает ширину блочных или заменяемых элементов (к ним, например, относится тег IMG). Ширина не включает толщину границ вокруг элемента, значение отступов и полей.

Разные браузеры неодинаково работают с шириной элемента. Так, если содержимое элемента превышает его заданную ширину, то Internet Explorer и Opera используют для атрибута width значение auto. Браузеры Netscape, Mozilla, Firefox оставляют указанную ширину неизменной, а содержимое при этом выходит за границы элемента и отображается поверх. Для встроенных элементов получается наоборот. Если ширина задана заведомо больше содержимого, то Internet Explorer и Opera отобразят область согласно присвоенному значению, а остальные браузеры атрибут width проигнорируют.

Синтаксис
width: значение | проценты | auto

Аргументы
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи ширина элемента вычисляется в зависимости от ширины родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера. Аргумент auto устанавливает ширину исходя из типа и содержимого элемента. Например, для тега DIV, ширина по умолчанию задается как 100%.

Значение по умолчанию
auto

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>

<div style="width: 80%; background: #fc0; padding: 7px; border: 1px solid #ccc">
<p style="width: 300px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</div>

</body>
</html>

Применяется
Ко всем элементам, за исключением встроенных незаменяемых элементов, колонкам и группам таблицы.

Объектная модель
[window.]document.getElementById("elementID").style.width

Примечание
Браузер Internet Explorer 4 не применяет свойство width к встроенным элементам, списками и некоторым элементам форм, вроде флажков, переключателей и текстовых полей. Netscape 4 не применяет указанное свойство для полей форм и заменяемых элементов. В браузере Opera 3.5 этот параметр не дает никакого эффекта для встроенных элементов, полей формы и таблиц.


z-index

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Нет | Да | Да

Описание
Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет атрибут z-index.

Синтаксис
z-index: число | auto

Аргументы
В качестве аргумента допустимо использовать положительное или отрицательно целое число, а также ноль. Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. При равном значении z-index, на переднем плане находится тот элемент, который в коде HTML описан ниже. Хотя спецификация и разрешает использовать отрицательные значения z-index, но такие элементы не отображаются в браузерах Netscape, Mozilla и Firefox.

Кроме числовых значений применяется auto — порядок элементов в этом случае строится автоматически, исходя из их положения в коде HTML и принадлежности к родителю, поскольку дочерние элементы имеют тот же номер, что их родительский элемент.

Значение по умолчанию
auto

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>
Слой 1 наверху
<div style="position:relative; font-size:50px; z-index:2; color: navy">Слой 1</div>
<div style="position:relative; top:-55; left:5; color:orange; font-size:70px; z-index:1">Слой 2</div>

Слой 2 наверху
<div style="position:relative; font-size:50px; z-index:3; color: navy">Слой 1</div>
<div style="position:relative; top:-55; left:5; color:orange; font-size:70px; z-index:4">Слой 2</div>
</body>
</html>

Применяется
К любым позиционированным элементам.

Объектная модель
[window.]document.getElementById("elementID").style.zIndex

Примечание
Список, созданный с помощью тега SELECT, в браузере Internet Exolorer всегда отображается поверх других элементов, несмотря на значение z-index. Только начиная с версии 5.5, Internet Explorer допускает применение атрибута z-index к фреймам (тег FRAME) и плавающим фреймам (IFRAME). Браузер Netscape 4.x поля форм всегда отображает поверх всех других элементов веб-страницы, независимо от заданного z-index.


clear

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Ошибки | Да | Да | Да | Ошибки | Да | Ошибки | Да | Да | Да | Да | Да

Описание
Параметр устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если установлено обтекание элемента с помощью параметра float, свойство clear отменяет его действие для указанных сторон.

Синтаксис
clear: both | left | none | right

Аргументы
Значение both отменяет обтекание элемента одновременно с правого и левого края. Этот аргумент рекомендуется установить, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны.
left — отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.
right — отменяет обтекание с правой стороны элемента.
none — отменяет действие данного свойства и обтекание элемента происходит, как задано с помощью параметра float или других настроек.

Значение по умолчанию
none

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>

<div style="float: left; background: #fd0; border: solid 1px black; padding: 10px; width: 40%">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
<div style="clear: left">
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.
</div>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.clear

Примечание
При работе со свойством clear, в некоторых браузерах возникают ошибки, когда обтекание элемента, при установке значения float, не отменяется.


clip

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Нет | Нет | Да | Да | Нет | Частично | Нет | Да | Да | Нет | Частично | Да

Описание
Параметр clip определяет область позиционированного элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, будет обрезано и становится невидимым. На данный момент единственно доступная форма области — прямоугольник. Все остальное остается только в мечтах. Параметр clip работает только для абсолютно позиционированных элементов.

Синтаксис
clip: rect(сверху справа снизу слева) | auto

Аргументы
В качестве аргументов используется расстояние от края элемента до области вырезки. Если край области нужно оставить без изменений, следует поставить параметр auto.

Значение по умолчанию
auto

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>

<div style="position: absolute; clip: rect(20px auto auto 20px); width: 200px; color: white; background: #7F4C3E; border: solid 1px black">
<p style="padding: 10px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.clip


display

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Част | Част | Част | Част | Част | Част | Част | Част | Част | Част | Част | Част

Част — Поддерживается частично

Описание
Многоцелевой атрибут, который определяет, должен ли элемент быть показан в документе. Отличается от похожего на него по действию параметра visible тем, что display не резервирует пустое пространство под элементом, а временно удаляет его из документа. Благодаря этому свойству, параметр display часто применяют для создания раскрывающегося списка, когда требуется, чтобы один текст заменял собой другой при нажатии на ссылку.

Синтаксис
CSS1 — display: block | inline | list-item | none
CSS2 — display: block | compact | inline | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-footer-group | table-header-group | table-row | table-row-group

Аргументы
Если элемент должен быть показан в документе, устанавливается значение block, inline или list-item. Значение none временно удаляет элемент из документа.
block — элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега SPAN, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
inline — элемент показывается как встроенный. Использование блочных тегов, таких как DIV и P, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Аргумент inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
list-item — элемент выводится как блочный и добавляется маркер списка.
none — временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение параметра и сделать его вновь видимым можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происхоит переформатирование данных на странице с учетом вновь добавленного элемента.

Значение по умолчанию
inline

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>

Duis te feugifacilisi.

<div style="display: inline">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<div style="display: none">Скрытое поле</div>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.display

Примечание
Список возможных значений этого атрибута, понимаемый разными браузерами очень короткий — block, inline и none. Все остальные допустимые аргументы поддерживаются браузерами выборочно.


float

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Ошибки | Ошибки | Да | Да | Ошибки | Да | Ошибки | Да | Да | Да | Да | Да

Описание
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение параметра float равно none, элемент выводится на странице как обычно, самое большое — одна строка обтекающего текста может быть на той же линии, что и сам элемент.

Синтаксис
float: left | right | none

Аргументы
left — выравнивает элемент по левому краю, а все остальные элементы, вроде текста, огибают его по правой стороне.
right — выравнивает элемент по правому краю, а все остальные элементы огибают его по левой стороне.
none — обтекание элемента не задается.

Значение по умолчанию
none

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>

<div style="float: left; background: #fd0; border: solid 1px black; padding: 10px; width: 40%">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
<div>
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.
</div>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.styleFloat

Примечание
Браузеры Internet Explorer 4/5 и Netscape 4.x по-разному работают с атрибутом float, особенно это касается изображений. Если Internet Explorer для тега IMG создает его обтекание, то Netscape для этого требует, чтобы параметр float применялся к тегу DIV, внутрь которого помещен рисунок.


overflow

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Нет | Да | Да | Да | Нет | Ошибки | Нет | Да | Да | Нет | Част. | Част.

Част. — Поддерживается частично

Описание
Свойство overflow управляет содержанием блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.

Синтаксис
overflow: auto | hidden | scroll | visible

Аргументы
visible — отображается все содержание элемента, даже за пределами установленной высоты и ширины.
hidden — отображается только область внутри элемента, остальное будет обрезано.
scroll — всегда добавляются полосы прокрутки.
auto — полосы прокрутки добавляются только при необходимости.

Значение по умолчанию
visible

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>

<div style="overflow: scroll; width: 300px; height: 150px; border: solid 1px black">
<h2>Duis te feugifacilisi</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

</body>
</html>

Применяется
Ко всем элементам, у которых установлена высота с помощью параметра height.

Объектная модель
[window.]document.getElementById("elementID").style.overflow

Примечание
Браузер Opera 6 не поддерживает свойство overflow: scroll.


visibility

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Да | Да | Да | Да | Да | Да | Частично | Да | Да | Нет | Да | Да

Описание
Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним. Если предполагается вывод разных элементов в одно и то же место экрана, для обхода этой особенности следует использовать абсолютное позиционирование или воспользоваться свойством display.

Синтаксис
visibility: inherit | visible | hidden | collapse

Аргументы
inherit — устанавливает значение этого свойства, как у родительского элемента.
visible — отображение элемента.
hidden — элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы.
collapse — если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden. В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено стилевое свойство display: none. Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой. Этот аргумент не поддерживается браузером Internet Explorer.

Значение по умолчанию
visible

Наследование
Значения, присвоенные данному параметру, наследуются.

Пример
<html>
<head>
<script language="JavaScript">

function hiddenLayer() {
document.getElementById("descr").style.visibility = "hidden";
}

function showLayer() {
document.getElementById("descr").style.visibility = "visible";
}
</script>
</head>

<body>
<a href=# onMouseOver="showLayer()" onMouseOut="hiddenLayer()"><img src=button.gif width=98 height=33 border=0></a>
<div id=descr style="visibility: hidden">Данная эксклюзия является подмножеством астрациональных супремативных монотенных федоний кадонарного экстрафазория.</div>
</body>
</html>

В примере показано динамическое отображение и скрытие слоя с именем descr, в зависимости от того, наведен курсор мыши на рисунок или нет.

Применяется
К любым элементам.

Объектная модель
[window.]document.getElementById("elementID").style.visibility

Примечание
В браузере Netscape 4.x свойство visibility не применяется к элементам списка, полям форм, изображениям и таблицам.


color

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Описание
Определяет цвет текста элемента.

Синтаксис
color: значение

Аргументы
Значение цвета можно задавать тремя способами.

1. По его названию
Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.

3. С помощью RGB
Можно определить цвет используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении.

Значение по умолчанию
black

Наследование
Значения, присвоенные данному параметру, наследуются.

Пример
<html>
<body>

<p><span style="color: red">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat.</p>
<p style="color: RGB(49, 151, 116)"><span style="color: #f00">Ut</span> wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.color


font

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Описание
Параметр позволяет установить одновременно несколько атрибутов стиля шрифта. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту.

Синтаксис
CSS1 — font: font-style || font-variant || font-weight || font-size || line-height || font-family
CSS2 — font: caption || icon || menu || messagebox || smallcaption || statusbar

Аргументы
Любые комбинации значений, определяющих стиль фона, в произвольном порядке. Значения разделяются между собой пробелом. Ни один аргумент не является обязательным, поэтому неиспользуемые значения можно опустить. Для более подробного ознакомления с аргументами, смотрите свойства каждого параметра отдельно.

Значение по умолчанию
Нет.

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>

<div style="font: 12pt sans-serif">
<h1 style="font: 200% serif">Duis te feugifacilisi</h1>
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.
</div>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.font

Примечание
Константы CSS2 обращаются к параметрам браузера и операционной системы пользователя, поэтому результат действия этих аргументов различается в зависимости от настроек. Применение этих атрибутов связано с необходимостью использования системных настроек шрифтов у себя на странице. Не все браузеры поддерживают эти новшества.


font-family

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Описание
Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого. Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в кавычки.

Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif, sans-serif, cursive, fantasy или monospace. Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.

Синтаксис
font-family: имя шрифта [, имя шрифта[, ...]]

Аргументы
Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:
serif — шрифты с засечками (антиквенные), типа Times;
sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
cursive — курсивные шрифты;
fantasy — декоративные шрифты;
monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова.

Значение по умолчанию
Шрифт, установленный в браузере по умолчанию. Обычно это Times New Roman.

Наследование
Значения, присвоенные данному параметру, наследуются.

Пример
<html>
<body>

<h1 style="font-family: Verdana, Arial, Helvetica, sans-serif">Duis te feugifacilisi</h1>
<p style="font-family: 'Times New Roman', Times, serif">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.fontFamily


font-size

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Частично | Частично | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Описание
Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задают размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.

Другой набор констант (larger, smaller) устанавливает относительные размеры шрифта. Поскольку размер унаследован от родительского элемента, эти относительные размеры применяются к родительскому элементу, чтобы определить размер шрифта текущего элемента.
В конечном итоге, размер шрифта сильно зависит от значения этого параметра у родителя элемента. Допустимо смешивать относительные и абсолютные размеры.

Синтаксис
font-size: абсолютный размер| относительный размер | значение | проценты

Аргументы
Для задания абсолютного размера используются следующие значения: xx-small | x-small | small | medium | large | x-large | xx-large. Относительный размер шрифта задается аргументами larger и smaller.

Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пиксели (px), проценты (%) и др. За 100 процентов берется размер шрифта родительского элемента.

Значение по умолчанию
medium — для BODY элемента;
размер шрифта родителя во всех остальных случаях.

Наследование
Значения, присвоенные данному параметру, наследуются.

Пример
<html>
<body>

<h1 style="font-size: 200%">Duis te feugifacilisi</h1>
<p style="font-size: 12pt">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.fontSize

Примечание
При задании абсолютного размера шрифта параметром small, Internet Explorer 4/5 будет показывать шрифт таким же размером, что и шрифт без стиля, который имеет размер medium.

Задание размера шрифта font-size: medium приведет к различным размерам шрифта в браузерах Internet Explorer и Netscape, что противоречит спецификации CSS и вводит в заблуждение многих разработчиков.


font-style

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Да | Да | Да | Да | Да | Да | Частично | Да | Да | Да | Да | Да

Описание
Определяет начертание шрифта — обычное, курсивное или наклонное. Когда для текста установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер использует специальный алгоритм для имитации нужного вида текста. Результат и качество при этом могут получиться неудовлетворительными, особенно при печати документа.

Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт, имитирующий рукописный, наклонный же образуется путем наклона обычных знаков.

Синтаксис
font-style: normal | italic | oblique

Аргументы
normal — обычное начертание текста;
italic — курсив;
oblique — наклонный шрифт.

Значение по умолчанию
Нет.

Наследование
Значения, присвоенные данному параметру, наследуются.

Пример
<html>
<body>

<h1>Duis te feugifacilisi</h1>
<p style="font-style: italic">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.fontStyle

Примечание
Аргумент oblique не поддерживается в браузере Netscape 4. В Internet Explorer шрифт со значением italic и oblique всегда показывается как курсив.


font-variant

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Ошибки | Да | Да | Да | Ошибки | Да | Нет | Да | Да | Да | Да | Да

Описание
Определяет, как нужно представлять прописные буквы — делать их все заглавными или оставить без изменений.

Синтаксис
font-variant: normal | small-caps

Аргументы
Значение normal не изменяет регистр символов, оставляя его по умолчанию. Аргумент small-caps модифицирует все прописные символы как заглавные уменьшенного размера.

Значение по умолчанию
normal

Наследование
Значения, присвоенные данному параметру, наследуются.

Пример
<html>
<body>

<h1 style="font-variant: small-caps"><span style="font-variant: normal">D</span>uis te feugifacilisi</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.fontVariant

Примечание
Internet Explorer при установке значения small-caps делает все буквы прописными, в то время, как заглавные буквы должны оставаться неизменными.


font-weight

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Да | Да | Да | Да | Да | Да | Частично | Да | Да | Да | Да | Да

Описание
Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700. Другие аргументы (bolder и lighter) позволяют менять жирность текста относительно насыщенности родительского элемента.

Синтаксис
font-weight: bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900.

Аргументы
Насыщенность шрифта задается с помощью ключевых слов: bold — полужирное, bolder — жирное; lighter — светлое, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900.

Значение по умолчанию
normal

Наследование
Значения, присвоенные данному параметру, наследуются.

Пример
<html>
<body>

<h1 style="font-weight: normal">Duis te feugifacilisi.</h1>
<span style="font-weight: 600">Lorem ipsum dolor sit amet</span>, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.fontWeight

Примечание
Браузер не всегда может адекватно показать требуемую насыщенность шрифта, это зависит от размеров текста и вида шрифта.


letter-spacing

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Да | Да | Да | Да | Да | Да | Нет | Да | Да | Да | Да | Да

Описание
Определяет интервал между символами в пределах элемента. Браузеры обычно устанавливают расстояние между символами, исходя из типа и вида шрифта, его размеров и настроек операционной системы. Чтобы изменить это значение и применяется данный атрибут. Допустимо использовать отрицательное значение, но в этом случае надо убедиться, что сохраняется читабельность текста.

Синтаксис
letter-spacing: значение | normal

Аргументы
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. Наилучший результат дает использование относительных единиц основанных на размере шрифта (em и ex). Аргумент normal задает интервал между символами как обычно.

Значение по умолчанию
normal

Наследование
Значения, присвоенные данному параметру, наследуются.

Пример
<html>
<body>

Duis te feugifacilisi.
<div style="letter-spacing: 5px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.letterSpacing


line-height

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Описание
Устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически. Отрицательное значение межстрочного расстояния не допускается.

Синтаксис
line-height: normal | множитель | значение | проценты

Аргументы
Значение normal заставляет браузер вычислять расстояние между строк автоматически. Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. В качестве значений принимаются также любые единицы длины, принятые в CSS — пиксели (px), дюймы (in), пункты (pt) и др. Разрешается использовать процентную запись, в этом случае за 100 процентов берется высота шрифта.

Значение по умолчанию
normal

Наследование
Значения, присвоенные данному параметру, наследуются.

Пример
<html>
<body>

<div style="width:200px; line-height: 1.5">
<h1 style="line-height: 60%">Duis te feugifacilisi</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.lineHeight


text-align

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Да | Да | Да | Да | Частично | Да | Ошибки | Да | Да | Да | Да | Да

Описание
Определяет горизонтальное выравнивание текста в пределах элемента. Этот атрибут наследуется, поэтому может быть установлен для целого блока, для воздействия на все вложенные в него элементы.

Синтаксис
text-align: center | justify | left | right

Аргументы
center — выравнивание по центру;
justify — одновременное выравнивание по левому и правому краю, в этом случае браузер добавляет пробелы между словами;
left — выравнивание по левому краю;
right — выравнивание по правому краю.

Значение по умолчанию
left

Наследование
Значения, присвоенные данному параметру, наследуются.

Пример
<html>
<body>

<p style="text-align: justify"> Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.textAlign

Примечание
В Netscape 4 при размещении текста в таблице со значением justify, текст может и не выравниваться по ширине, но в остальных случаях все работает корректно.


text-decoration

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Част. | Да | Да | Да | Част. | Да | Част. | Да | Да | Част. | Да | Да

Част. — Поддерживается частично

Описание
Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

Синтаксис
text-decoration: blink | line-through | overline | underline | none

Аргументы
blink — мигающий текст;
line-through — перечеркнутый текст;
overline — линия проходит над текстом.
underline — подчеркнутый текст;
none — отменяет все эффекты.

Значение по умолчанию
none

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<style>
a { text-decoration: none }
a:hover { text-decoration: underline }
</style>
<body>

<a href=link1.html>Lorem ipsum dolor sit amet</a>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.textDecoration
[window.]document.getElementById("elementID").style.textDecorationBlink
[window.]document.getElementById("elementID").style.textDecorationLineThrough
[window.]document.getElementById("elementID").style.textDecorationNone
[window.]document.getElementById("elementID").style.textDecorationOverLine
[window.]document.getElementById("elementID").style.textDecorationUnderline

Примечание
Браузер Netscape 4.x не поддерживает аргумент overline, Internet Explorer хотя и позволяет использовать значение blink, текст показывает как обычно, без всякого мерцания.

Согласно спецификации CSS, если для элемента задан вид форматирования, а для его наследника нет, все равно свойства родителя будут передаваться его вложенным элементам. Так, если используется подчеркнутый параграф, а внутри него расположен неподчеркнутый элемент color, выделяющий слово другим цветом, все слова в параграфе будут подчеркнуты, включая и выделенные другим цветом слова. На практике, однако, установка text-decoration: none уберет все эффекты, независимо от оформления родительского элемента. Единственные исключения — браузеры Opera и Internet Explorer 5 для Macintosh, которые выполняют эту часть спецификации правильно. Opera 4/5 и Netscape 6 не изменяют параметры изображений внутри тега SPAN при задании параметров оформления родительского элемента. Вдобавок, Netscape 6 не распространяет оформление родительского элемента на дочерние, а переносит только подчеркивание.
Несмотря на кажущуюся простоту проблемы, особенность параметра text-decoration является головной болью для разработчиков сайтов.


text-indent

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Ошибки | Ошибки | Да | Да | Ошибки | Да | Ошибки | Да | Да | Да | Да | Да

Описание
Устанавливает величину отступа первой строки блока текста (например, для параграфа P). Воздействия на все остальные строки не оказывается. Допускается отрицательное значение для создания выступа первой строки, но следует проверить, чтобы текст не выходил за пределы окна браузера.

Синтаксис
text-indent: значение | проценты

Аргументы
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. При задании значения в процентах, отступ первой строки вычисляется в зависимости от ширины блока. Допустимо использовать отрицательные значения, но при этом в разных браузерах возможно появление ошибок.

Значение по умолчанию
0

Наследование
Значения, присвоенные данному параметру, наследуются.

Пример
<html>
<body>

<p style="text-indent: 5em">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

Применяется
К блочным элементам.

Объектная модель
[window.]document.getElementById("elementID").style.textIndent


text-transform

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Да | Да | Да | Да | Да | Да | Ошибки | Да | Да | Ошибки | Да | Да

Описание
Управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none, регистр исходного текста будет изменен.

Синтаксис
text-transform: capitalize | lowercase | uppercase | none

Аргументы
none — текст пишется как есть, без каких-либо изменений.
capitalize — каждое слово будет начинаться с заглавного символа.
lowercase — все символы становятся строчными (нижний регистр).
uppercase — все символы становятся прописными (верхний регистр).

Значение по умолчанию
none

Наследование
Значения, присвоенные данному параметру, наследуются.

Пример
<html>
<head>
<style>
h1 { text-transform: uppercase; }
p { text-transform: capitalize; }
</style>
</head>
<body>

<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.textTransform


vertical-align

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Част. | Част. | Част. | Част. | Част. | Част. | Част. | Да | Да | Да | Да | Да

Част. — Поддерживается частично.

Описание
Выравнивает элемент по вертикали относительно своего родителя.

Синтаксис
vertical-align: baseline | bottom | middle | sub | super | text-bottom | text-top | top | значение | проценты

Аргументы
baseline — выравнивает базовую линию текущего элемента по базовой линии родителя. Если родительский элемент не имеет базовой линии, то за нее принимается нижняя граница элемента.
bottom — выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех.
middle — выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента.
sub — элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта при этом не меняется.
super — элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта остается прежним.
text-bottom — нижняя граница элемента выравнивается по самому нижнему краю текущей строки.
text-top — верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки.
top — выравнивание верхнего края элемента по верху самого высокого элемента строки.

В качестве значения можно использовать проценты, пикселы или другие доступные единицы. Положительный аргумент смещает элемент вверх относительно базовой линии, в то время как отрицательное значение опускает его вниз. Не все браузеры поддерживают такой способ записи, в частности, Internet Explorer и Netscape только с шестой версии.

Значение по умолчанию
baseline

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>

<div style="font-family: Times, serif; font-size: 200%">
T<span style="vertical-align: sub">E</span>X и L<span style="vertical-align: 5px; font-size: 80%">A</span>T<span style="vertical-align: sub">E</span>X
</div>

</body>
</html>

Применяется
Только к встроенным элементам.

Объектная модель
[window.]document.getElementById("elementID").style.verticalAlign


white-space

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Нет | Нет | Да | Да | Нет | Да | Частично | Да | Да | Нет | Да | Да

Описание
Параметр white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является тег PRE, помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space имитирует работу тега PRE, но в отличие от него не меняет шрифт на моноширинный.

Синтаксис
white-space: normal | nowrap | pre

Аргументы
normal — текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически.
nowrap — переносы строк в коде HTML игнорируются, весь текст отображается одной строкой, вместе с тем, добавление тега BR переносит текст на новую строку.
pre — текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML.

Значение по умолчанию
normal

Наследование
Значения, присвоенные данному параметру, наследуются.

Пример

<html>
<body>

<p style="white-space: pre">
&lt;html&gt;
&lt;body&gt;
&lt;b&gt;Великая теорема Ферма&lt;/b&gt;&lt;br&gt;
&lt;i&gt;X &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt;
+ Y &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt; =
Z &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt;&lt;/i&gt;&lt;br&gt;
где n - целое число &gt; 2
&lt;/body&gt;
&lt;/html&gt;
</p>

</body>
</html>

Применяется
К блочным элементам.

Объектная модель
[window.]document.getElementById("elementID").style.whiteSpace

Примечание
Значение nowrap не доступно в браузере Netscape 4.


word-spacing

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Нет | Нет | Нет | Да | Да | Да | Нет | Да | Да | Да | Да | Да

Описание
Устанавливает интервал между словами. Если установлен параметр выравнивания justify, то атрибут word-spacing не действует, поскольку интервал между словами будет установлен принудительно, чтобы строка текста была выровнена по правому и левому краю.

Синтаксис
word-spacing: значение | normal

Аргументы
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. Значение параметра может быть и отрицательным, но следует проверять работоспособность в разных браузерах. Процентная запись не применима.

Значение по умолчанию
normal

Наследование
Значения, присвоенные данному параметру, наследуются.

Пример
<html>
<body>

<p style="word-spacing: 20px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

Применяется
Ко всем элементам.


list-style

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Описание
Атрибут, позволяющий одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера. Для более подробного ознакомления с аргументами, смотрите свойства каждого параметра list-style-type, list-style-position и list-style-image отдельно.

Синтаксис
list-style: list-style-type || list-style-position || list-style-image

Аргументы
Любые комбинации трех значений, определяющих стиль маркеров, в произвольном порядке. Значения разделяются между собой пробелом. Ни один аргумент не является обязательным, поэтому неиспользуемые значения можно опустить.

Значение по умолчанию
Нет.

Наследование
Значения, присвоенные данному параметру, наследуются.

Пример
<html>
<body>

<ul style="list-style: square outside">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetuer adipiscing elit</li>
<li>Sed diem nonummy nibh euismod</li>
<li>Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</li>
</ul>

</body>
</html>

Применяется
К тегам DD, DT, LI, OL и UL, а также ко всем элементам, у которых указано свойство стиля display: list-item.

Объектная модель
[window.]document.getElementById("elementID").style.listStyle


list-style-image

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Да | Да | Да | Да | Да | Да | Нет | Да | Да | Да | Да | Да

Описание
Устанавливает адрес изображения, которое служит в качестве маркера списка. Этот атрибут наследуется, поэтому для отдельных элементов списка для восстановления маркера используется значение none.

Синтаксис
list-style-image: none | url('путь к файлу')

Аргументы
В качестве значения используется относительный или абсолютный путь к графическому файлу. Аргумент none отменяет изображение в качестве маркера для родительского элемента.

Значение по умолчанию
none

Наследование
Значения, присвоенные данному параметру, наследуются.

Пример
<html>
<body>

<ul style="list-style-image: url('check.gif')">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetuer adipiscing elit</li>
<li style="list-style-image: none">Sed diem nonummy nibh euismod</li>
<li>Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</li>
</ul>

</body>
</html>

Применяется
К тегам DD, DT, LI, OL и UL, а также ко всем элементам, у которых указано свойство стиля display: list-item.

Объектная модель
[window.]document.getElementById("elementID").style.listStyleImage


list-style-position

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Да | Да | Да | Да | Да | Да | Нет | Да | Да | Да | Да | Да

Описание
Определяет, как будет размещаться маркер относительно текста. Имеется два значения: outside — маркер вынесен за границу элемента списка (рис. 1) и inside — маркер обтекается текстом (рис.2).

  • Lorem ipsum dolor sit amet
  • Tincidunt ut lacreet dolore magna aliguam erat volutpat.
  • Lorem ipsum dolor sit amet
  • Tincidunt ut lacreet dolore magna aliguam erat volutpat.
Рис. 1 Рис. 2

Синтаксис
list-style-position: inside | outside

Аргументы
Когда значение равно inside и параметр list-style-position используется для текста — маркер является частью текстового блока и отображается в элементе списка. Для аргумента outside текст выравнивается по левому краю, а маркеры размещаются вне пределах текстового блока.

Значение по умолчанию
outside

Наследование
Значения, присвоенные данному параметру, наследуются.

Пример
<html>
<body>

<ul style="list-style-position: inside">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetuer adipiscing elit</li>
<li>Sed diem nonummy nibh euismod</li>
<li>Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</li>
</ul>

</body>
</html>

Применяется
К тегам DD, DT, LI, OL и UL, а также ко всем элементам, у которых указано свойство стиля display: list-item.

Объектная модель
[window.]document.getElementById("elementID").style.listStylePosition


list-style-type

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Да | Да | Да | Да | Да | Да | Ошибки | Да | Да | Да | Да | Да

Описание
Изменяет вид маркера для каждого элемента списка. Этот атрибут используется только в случае, когда значение свойства list-style-image установлено как none. Маркеры различаются для маркированного списка (тег UL) и нумерованного (тег OL).

Синтаксис
list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none

Аргументы
Для маркированного списка используются аргументы circle, disc, square. Для нумерованного списка: decimal, lower-alpha, lower-roman, upper-alpha, upper-roman. Аргумент none устанавливает тип маркера, как у родительского элемента. Вид маркеров приведен в таблице.

Тип | Пример
disc |
circle |
square |
decimal | 1, 2, 3, ...
lower-roman | a, b, c, ...
upper-roman | i, ii, iii, ...
lower-alpha | A, B, C, ...
upper-alpha | I, II, III, ...

Значение по умолчанию
disc (для UL); decimal (для OL).

Наследование
Значения, присвоенные данному параметру, наследуются.

Пример
<html>
<body>

<ul style="list-style-type: square">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetuer adipiscing elit</li>
<li>Sed diem nonummy nibh euismod</li>
<li>Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</li>
</ul>

</body>
</html>

Применяется
К тегам DD, DT, LI, OL и UL, а также ко всем элементам, у которых указано свойство стиля display: list-item.

Объектная модель
[window.]document.getElementById("elementID").style.listStyleType

Примечание
Если заданы отступы параметрами margin или padding и установлено значение list-style-type: none, браузер Netscape 4.x, несмотря на это, показывает маркеры.


margin

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Ошибки | Ошибки | Да | Да | Ошибки | Да | Ошибки | Да | Да | Да | Да | Да

Описание
Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от левого края элемента

Рис. 1. Отступ от левого края элемента

Если у элемента нет родителя, отступом будет расстояние от края элемента до края окна браузера с учетом того, что у самого окна по умолчанию тоже установлены отступы. Чтобы от них избавиться, следует устанавливать значение margin для селектора BODY равное нулю (см. пример).

Параметр margin позволяет задать величину отступа сразу для всех сторон элемента или определить ее только для указанных сторон.

Синтаксис
margin: значение| auto {1,4}

Аргументы
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества аргументов и приведен в сводной таблице.

Число аргументов | Результат
1 | Отступы будут установлены для всех сторон элемента.
2 | Первый аргумент устанавливает отступ от верхнего и нижнего края, второй аргумент — от левого и правого.
3 | Первый аргумент задает отступ от верхнего края, второй — одновременно от левого и правого края, а третий — от нижнего края.
4 | Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.

Величину отступов можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. Аргумент auto указывает, что размер отступов будет автоматически рассчитан браузером.

Значение по умолчанию
0

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<head>
<style>

BODY { margin: 0px; }

DIV.parent {

margin: 20%;
background: #fd0;
padding: 10px;

}

DIV.child {
border: 3px solid #666;
padding: 10px;
margin: 10px;

}

</style>
</head>

<body>

<div class=parent>
<div class=child>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

</div>
</div>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.margin

Примечание
Все отступы имеют проблемы или не поддерживаются полностью для встроенных элементов. В случае параметра margin, то он хорошо поддерживается для блочных элементов в Internet Explorer 4/5, но в то же время для встроенных элементов игнорируется полностью. Netscape 4.x работает корректно, пока параметр margin не применяется к плавающим или встроенным элементам. Opera 4 имеет проблемы с правыми и левыми отступами для встроенных элементов.


margin-bottom

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Ошибки | Ошибки | Да | Да | Ошибки | Да | Ошибки | Да | Да | Да | Да | Да

Описание
Устанавливает величину отступа от нижнего края элемента. Отступом является расстояние от внешнего края нижней границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от нижнего края элемента

Рис. 1. Отступ от нижнего края элемента

Синтаксис
margin-bottom: значение | auto

Аргументы
Величину нижнего отступа можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. Аргумент auto указывает, что размер отступов будет автоматически рассчитан браузером.

Значение по умолчанию
0

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>

<div style="background: #008B66; color: white; padding: 10px; margin-bottom: -7px">
<big>Lorem ipsum dolor sit amet</big>
</div>

<div style="margin-left: 40px; background: #ccc; padding: 10px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.marginBottom

Примечание
Все отступы имеют проблемы или не поддерживаются полностью для встроенных элементов. В случае параметра margin-bottom, то он хорошо поддерживается для блочных элементов в Internet Explorer 4/5, но в то же время для встроенных элементов игнорируется полностью. Netscape 4.x работает корректно, пока параметр margin-bottom не применяется к плавающим или встроенным элементам. Opera 4 имеет проблемы с правыми и левыми отступами для встроенных элементов.


margin-left

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Ошибки | Ошибки | Да | Да | Ошибки | Да | Ошибки | Да | Да | Да | Да | Да

Описание
Устанавливает величину отступа от левого края элемента. Отступом является расстояние от внешнего края левой границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от левого края элемента

Рис. 1. Отступ от левого края элемента

Синтаксис
margin-left: значение | auto

Аргументы
Величину левого отступа можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. Аргумент auto указывает, что размер отступов будет автоматически рассчитан браузером.

Значение по умолчанию
0

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>

<div style="background: #D36037">
<div style="margin-left: 20%; background: #ccc; padding: 10px">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismodtincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

</div>
</div>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.marginLeft

Примечание
Все отступы имеют проблемы или не поддерживаются полностью для встроенных элементов. В случае параметра margin-left, то он хорошо поддерживается для блочных элементов в Internet Explorer 4/5, но в то же время для встроенных элементов игнорируется полностью. Netscape 4.x работает корректно, пока параметр margin-left не применяется к плавающим или встроенным элементам. Opera 4 имеет проблемы с правыми и левыми отступами для встроенных элементов.


margin-right

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Ошибки | Ошибки | Да | Да | Ошибки | Да | Ошибки | Да | Да | Да | Да | Да

Описание
Устанавливает величину отступа от правого края элемента. Отступом является расстояние от внешнего края правой границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от правого края элемента

Рис. 1. Отступ от правого края элемента

Синтаксис
margin-right: значение | auto

Аргументы
Величину правого отступа можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. Аргумент auto указывает, что размер отступов будет автоматически рассчитан браузером.

Значение по умолчанию
0

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<head>
<style>

BODY {

margin-right: 25%;
margin-left: 25%;

}

DIV {

background: #007083;
color: white;
padding: 10px;

}

</style>
</head>
<body>

<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.marginRight

Примечание
Все отступы имеют проблемы или не поддерживаются полностью для встроенных элементов. В случае параметра margin-right, то он хорошо поддерживается для блочных элементов в Internet Explorer 4/5, но в то же время для встроенных элементов игнорируется полностью. Netscape 4.x работает корректно, пока параметр margin-right не применяется к плавающим или встроенным элементам. Opera 4 имеет проблемы с правыми и левыми отступами для встроенных элементов.


margin-top

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Ошибки | Ошибки | Да | Да | Ошибки | Да | Ошибки | Да | Да | Да | Да | Да

Описание
Устанавливает величину отступа от верхнего края элемента. Отступом является расстояние от внешнего края нижней границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от верхнего края элемента

Рис. 1. Отступ от верхнего края элемента

Синтаксис
margin-top: значение | auto

Аргументы
Величину верхнего отступа можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. Аргумент auto указывает, что размер отступов будет автоматически рассчитан браузером.

Значение по умолчанию
0

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>

<div style="background-color: #fc3; border: 2px solid black; padding: 20px; margin-top: 20%">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.marginTop

Примечание
Все отступы имеют проблемы или не поддерживаются полностью для встроенных элементов. В случае параметра margin-top, то он хорошо поддерживается для блочных элементов в Internet Explorer 4/5, но в то же время для встроенных элементов игнорируется полностью. Netscape 4.x работает корректно, пока параметр margin-top не применяется к плавающим или встроенным элементам. Opera 4 имеет проблемы с правыми и левыми отступами для встроенных элементов.


padding-left

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Ошибки | Ошибки | Да | Да | Ошибки | Да | Ошибки | Да | Да | Да | Да | Да

Описание
Устанавливает значение поля от левого края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Рис. 1. Поле слева от текста

Рис. 1. Поле слева от текста

Синтаксис
padding-left: значение | auto

Аргументы
Величину левого поля можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. Аргумент auto указывает, что размер поля будет автоматически рассчитан браузером.

Значение по умолчанию
0

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>

<div style="background-color: #fc3; border: 2px solid black; padding: 10px; padding-left: 40px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.paddingLeft

Примечание
Все поля имеют проблемы или не поддерживаются полностью для встроенных элементов. В случае параметра padding-bottom, то он хорошо поддерживается для блочных элементов в Internet Explorer 4/5, но в то же время для встроенных элементов игнорируется полностью. Netscape 4.x работает корректно, пока параметр padding-bottom не применяется к плавающим или встроенным элементам.


padding

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Ошибки | Ошибки | Да | Да | Ошибки | Да | Ошибки | Да | Да | Да | Да | Да

Описание
Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Рис. 1. Поле слева от текста

Рис. 1. Поле слева от текста

Параметр padding позволяет задать величину отступа сразу для всех сторон элемента или определить ее только для указанных сторон.

Синтаксис
padding: значение | auto {1, 4}

Аргументы
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества аргументов и приведен в сводной таблице.

Число аргументов | Результат
1 | Поля будут установлены для всех сторон содержимого элемента.
2 | Первый аргумент устанавливает поле от верхнего и нижнего края содержимого, второй аргумент — от левого и правого.
3 | Первый аргумент задает поле от верхнего края содержимого, второй — одновременно от левого и правого края, а третий — от нижнего края.
4 | Поочередно устанавливаются поля от верхнего, правого, нижнего и левого края содержимого.

Величину полей можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. Аргумент auto указывает, что размер полей будет автоматически рассчитан браузером.

Значение по умолчанию
0

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>

<div style="background-color: #fc3; border: 2px solid black; padding: 20px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.padding

Примечание
Все поля имеют проблемы или не поддерживаются полностью для встроенных элементов. Опера 3.6 игнорирует отрицательные значения параметра padding, но изменит высоту строки встроенного элемента, основываясь на некорректных значениях полей. Internet Explorer 4/5 правильно работает для блочных элементов, но встроенные элементы игнорирует полностью. Netscape 4.x работает корректно, пока параметр padding не применяется к плавающим или встроенным элементам.


padding-bottom

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Ошибки | Ошибки | Да | Да | Ошибки | Да | Ошибки | Да | Да | Да | Да | Да

Описание
Устанавливает значение поля от нижнего края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Рис. 1. Поле снизу от текста

Рис. 1. Поле снизу от текста

Синтаксис
padding-bottom: значение | auto

Аргументы
Величину нижнего поля можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. Аргумент auto указывает, что размер поля будет автоматически рассчитан браузером.

Значение по умолчанию
0

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>

<div style="background-color: #fc3; border: 2px solid black; padding: 10px; padding-bottom: 40px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.paddingBottom

Примечание
Все поля имеют проблемы или не поддерживаются полностью для встроенных элементов. В случае параметра padding-bottom, то он хорошо поддерживается для блочных элементов в Internet Explorer 4/5, но в то же время для встроенных элементов игнорируется полностью. Netscape 4.x работает корректно, пока параметр padding-bottom не применяется к плавающим или встроенным элементам.


padding-right

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Ошибки | Ошибки | Да | Да | Ошибки | Да | Ошибки | Да | Да | Да | Да | Да

Описание
Устанавливает значение поля от правого края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Рис. 1. Поле справа от текста

Рис. 1. Поле справа от текста

Синтаксис
padding-right: значение | auto

Аргументы
Величину правого поля можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. Аргумент auto указывает, что размер поля будет автоматически рассчитан браузером.

Значение по умолчанию
0

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>

<div style="background-color: #fc3; border: 2px solid black; padding: 10px; padding-right: 40px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.paddingRight

Примечание
Все поля имеют проблемы или не поддерживаются полностью для встроенных элементов. В случае параметра padding-bottom, то он хорошо поддерживается для блочных элементов в Internet Explorer 4/5, но в то же время для встроенных элементов игнорируется полностью. Netscape 4.x работает корректно, пока параметр padding-bottom не применяется к плавающим или встроенным элементам.


padding-top

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Ошибки | Ошибки | Да | Да | Ошибки | Да | Ошибки | Да | Да | Да | Да | Да

Описание
Устанавливает значение поля от верхнего края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Рис. 1. Поле сверху от текста

Рис. 1. Поле сверху от текста

Синтаксис
padding-top: значение | auto

Аргументы
Величину верхнего поля можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. Аргумент auto указывает, что размер поля будет автоматически рассчитан браузером.

Значение по умолчанию
0

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>

<div style="background-color: #fc3; border: 2px solid black; padding: 10px; padding-top: 40px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

</body>
</html>

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.paddingTop

Примечание
Все поля имеют проблемы или не поддерживаются полностью для встроенных элементов. В случае параметра padding-bottom, то он хорошо поддерживается для блочных элементов в Internet Explorer 4/5, но в то же время для встроенных элементов игнорируется полностью. Netscape 4.x работает корректно, пока параметр padding-bottom не применяется к плавающим или встроенным элементам.


border-collapse

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Нет | Да | Да | Да | Нет | Нет | Нет | Нет | Да | Нет | Ошибки | Ошибки

Описание
Устанавливает, как отображать границы вокруг ячеек таблицы. Этот параметр играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины. Значение collapse заставляет браузер убирать в таблице двойные линии. Устанавливает, как отображать границы вокруг ячеек таблицы. Этот параметр играет роль, когда для ячеек установлена рамка, в таком случае в месте стыка ячеек получится линия двойной толщины. Добавление значения collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии. При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.

Синтаксис
border-collapse: inherit | collapse | separate

Аргументы
inherit — свойства наследуются у родителя элемента. Этот аргумент поддерживается только в браузерах Netscape 7 и Opera 7.
collapse — линия между ячейками отображается как одна.
separate — вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии.

Значение по умолчанию
separate

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<head>
<style type="text/css">
TABLE { width: 300px; border: 4px double black; border-collapse: collapse }
TH { text-align: left; background: #ccc; padding: 5px; border: 1px solid black }
TD { padding: 5px; border: 1px solid black }
</style>
</head>
<body>

<table cellspacing=0>
<tr>
<th>&nbsp;</th>
<th>2003</th>
<th>2004</th>
<th>2005</th>
</tr>
<tr>
<td>Нефть</td>
<td>43</td>
<td>51</td>
<td>79</td>
</tr>
<tr>
<td>Золото</td>
<td>29</td>
<td>34</td>
<td>48</td>
</tr>
<tr>
<td>Дерево</td>
<td>38</td>
<td>57</td>
<td>36</td>
</tr>
</table>

</body>
</html>

Применяется
К тегу TABLE или к элементам, у которых значение свойства display установлено как table или inline-table.

Примечание
Браузер Opera иногда проявляет некоторые причуды в отображении границ. Например, линии могут появляться в том месте, где их по соображениям разработчиков быть не должно.


table-layout

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Нет | Нет | Да | Да | Нет | Нет | Нет | Да | Да | Нет | Ошибки | Да

Описание
Определяет, как браузер должен вычислять высоту и ширину ячеек таблицы, основываясь на ее содержимом.

Синтаксис
table-layout: auto | fixed

Аргументы
auto — браузер загружает всю таблицу, анализирует ее для определения размеров ячеек и только после этого отображает.
fixed — это значение повышает производительность построения таблиц. Ширина колонок в этом случае определяется либо с помощью тега COL, либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы, по каким-либо причинам, получить невозможно, в этом случае, таблица делится на колонки равной ширины.

Значение по умолчанию
auto

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>

<table width=700 cellspacing=0 border=1 bordercolor=black style="table-layout: fixed">
<tr>
<td>&nbsp;</td>
<td>1995</td><td>1996</td><td>1997</td><td>1998</td>
<td>1999</td><td>2000</td><td>2001</td><td>2002</td>
<td>2003</td>
</tr>
<tr>
<td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td>
<td>3</td><td>34</td><td>62</td><td>74</td><td>57</td>
</tr>
<tr>
<td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td>
<td>4</td><td>69</td><td>72</td><td>56</td><td>47</td>
</tr>
<tr>
<td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td>
<td>7</td><td>73</td><td>79</td><td>34</td><td>86</td>
</tr>
</table>

</body>
</html>

Применяется
К элементу TABLE.


cursor

Браузер | Internet Explorer |  |  |  |  |  | Netscape Navigator |  |  | Opera
Платформа | Windows |  |  |  | Macintosh |  | Все платформы |  |  | Все платформы
Версия | 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0
Поддерживается | Нет | Нет | Да | Да | Нет | Да | Нет | Да | Да | Нет | Нет | Да

Описание
Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.
Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет ли он использоваться к месту. Многих пользователей подобные изменения могут ввести в заблуждение, когда, например, вместо традиционной руки, появляющейся при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше оставить все как есть.

Синтаксис
cursor: auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | s-resize | se-resize | sw-resize | text | w-resize | wait || url('путь к курсору')

Аргументы
auto — вид курсора по умолчанию для текущего элемента;
url — позволяет установить свой собственный курсор, для этого нужно указать путь к файлу, в котором указана форма курсора, в формате CUR. Данный параметр работает только в браузере Internet Explorer 6.
Остальные допустимые аргументы приведены в таблице.

Вид | Значение | Тест | Пример
 | default | ТЕСТ | cursor:default
 | crosshair | ТЕСТ | cursor:crosshair
 | hand | ТЕСТ | cursor:hand
 | move | ТЕСТ | cursor:move
 | text | ТЕСТ | cursor:text
 | wait | ТЕСТ | cursor:wait
 | help | ТЕСТ | cursor:help
 | n-resize | ТЕСТ | cursor:n-resize
 | ne-resize | ТЕСТ | cursor:ne-resize
 | e-resize | ТЕСТ | cursor:e-resize
 | se-resize | ТЕСТ | cursor:se-resize
 | s-resize | ТЕСТ | cursor:s-resize
 | sw-resize | ТЕСТ | cursor:sw-resize
 | w-resize | ТЕСТ | cursor:w-resize
 | nw-resize | ТЕСТ | cursor:nw-resize

Значение по умолчанию
auto

Наследование
Значения, присвоенные данному параметру, наследуются.

Пример
<html>
<head>
<style type="text/css">
.cross { cursor: crosshair }
.help { cursor: help }
</style>
</head>
<body>
<b>
<span class="cross">На этом тексте курсор мыши примет вид перекрестья.</span>
<br>

<a href="help1.htm" class=help>СПРАВКА 1 </a><br>
<a href="help2.htm" class=help>СПРАВКА 2</a><br>
<a href="help3.htm" class=help>СПРАВКА 3</a>
</b>
</body>
</html>

Применяется
Ко всем элементам.